<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="assets/css/ace.min.css"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link href="Widget/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css"/>
    <![endif]-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>
    <!-- page specific plugin scripts -->
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/jquery.dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <script src="assets/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <script src="js/lrtk.js" type="text/javascript"></script>
    <style>
        /*.layui-layer-btn .layui-layer-btn0{*/
        /*border-color: #dedede;*/
        /*background-color: #f1f1f1;*/
        /*color: #000;*/
        /*opacity: .9;*/
        /*text-decoration: none;*/
        /*}*/
    </style>
    <title>产品生产过程查询</title>
</head>
<body>

<div>
    <div id="brand_style">
        <div class="search_style">

            <ul class="search_content clearfix">
                <li><label class="l_f">订单编号</label><input name="" type="text" class="text_add" placeholder="输入订单编号"
                                                          style=" width:150px"/></li>
                <li style="width:90px;">
                    <button type="button" class="cha_x btn_search">查询</button>
                </li>
            </ul>
        </div>
        <div id="hide_tab" style="visibility:hidden">
            <table class="table table-striped table-bordered table-hover" id="sample-table" align="center">
                <thead>
                <tr>
                    <th width="50px">序号</th>
                    <th width="100px">产品名称</th>
                    <th width="100">订单编号</th>
                    <th width="120px">生产批次</a></th>
                    <th width="120px">产品型号</th>
                    <th width="120px">产品颜色</th>
                    <th width="100px">生产数量</th>
                    <th width="180px">下单时间</th>
                    <th width="100px">负责人</th>
                    <th width="180px">电话号码</th>
                    <th width="80px">状态</th>
                    <th width="80px">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>旭派电池</td>
                    <td>20160705445622</td>
                    <td>ZZ25125215KEL</td>
                    <td>64ma</td>
                    <td>黑</td>
                    <td class="text-l">3000</td>
                    <td class="text-l">2016.11.20</td>
                    <td class="text-l">张三</td>
                    <td class="text-l">13131313111</td>
                    <td class="td-status"><span class="label label-important radius"><a href="javascript:;"
                    style="color: #fff;text-decoration: none;cursor: default">确认中</a></span>
                    </td>
                    <td><a style="text-decoration:none" class="que_r btn btn-xs btn-success"
                           href="javascript:;" title="详情"><i class=" icon-list bigger-120"></i></a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>旭派电池</td>
                    <td>20160705445622</td>
                    <td>ZZ25125215KEL</td>
                    <td>64ma</td>
                    <td>黑</td>
                    <td class="text-l">3000</td>
                    <td class="text-l">2016.11.20</td>
                    <td class="text-l">张三</td>
                    <td class="text-l">13131313111</td>
                    <td class="td-status"><span class="label label-grey radius"><a href="javascript:;"
                    style="color: #fff;text-decoration: none;cursor: default">生产中</a></span>
                    </td>
                    <td><a style="text-decoration:none" class="shen_c btn btn-xs btn-success"
                           href="javascript:;" title="详情"><i class="icon-list bigger-120"></i></a></td>

                </tr>
                <tr>
                    <td>3</td>
                    <td>旭派电池</td>
                    <td>20160705445622</td>
                    <td>ZZ25125215KEL</td>
                    <td>64ma</td>
                    <td>黑</td>
                    <td class="text-l">3000</td>
                    <td class="text-l">2016.11.20</td>
                    <td class="text-l">张三</td>
                    <td class="text-l">13131313111</td>
                    <td class="td-status"><span class="label label-inverse radius"><a href="javascript:;"
                    style="color: #fff;text-decoration: none;cursor: default">已入库</a></span>
                    </td>
                    <td><a style="text-decoration:none" class="ru_k btn btn-xs btn-success"
                           href="javascript:;" title="详情"><i class=" icon-list bigger-120"></i></a></td>

                </tr>
                <tr>
                    <td>4</td>
                    <td>旭派电池</td>
                    <td>20160705445622</td>
                    <td>ZZ25125215KEL</td>
                    <td>64ma</td>
                    <td>黑</td>
                    <td class="text-l">3000</td>
                    <td class="text-l">2016.11.20</td>
                    <td class="text-l">张三</td>
                    <td class="text-l">13131313111</td>
                    <td class="td-status"><span class="label label-info radius"><a href="javascript:;"
                    style="color: #fff;text-decoration: none;cursor: default">已出库</a></span>
                    </td>
                    <td><a style="text-decoration:none" class="chu_k btn btn-xs btn-success"
                           href="javascript:;" title="详情"><i class="icon-list bigger-120"></i></a></td>

                </tr>
                <tr>
                    <td>5</td>
                    <td>旭派电池</td>
                    <td>20160705445622</td>
                    <td>ZZ25125215KEL</td>
                    <td>64ma</td>
                    <td>黑</td>
                    <td class="text-l">3000</td>
                    <td class="text-l">2016.11.20</td>
                    <td class="text-l">张三</td>
                    <td class="text-l">13131313111</td>
                    <td class="td-status"><span class="label label-default"><a href="javascript:;"
                    style="color: #fff;text-decoration: none;cursor: default">物流中</a></span>
                    </td>
                    <td><a style="text-decoration:none" class="wu_liu btn btn-xs btn-success"
                           href="javascript:;" title="详情"><i class="icon-list bigger-120"></i></a></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>旭派电池</td>
                    <td>20160705445622</td>
                    <td>ZZ25125215KEL</td>
                    <td>64ma</td>
                    <td>黑</td>
                    <td class="text-l">3000</td>
                    <td class="text-l">2016.11.20</td>
                    <td class="text-l">张三</td>
                    <td class="text-l">13131313111</td>
                    <td class="td-status"><span class="label label-success"><a href="javascript:;"
                    style="color: #fff;text-decoration: none;cursor: default">已签收</a></span>
                    </td>
                    <td><a style="text-decoration:none" class="chen_g btn btn-xs btn-success"
                           href="javascript:;" title="详情"><i class="icon-list bigger-120"></i></a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
<div class="add_menber" id="add_menber_style" style="display:none;">
    <div class="clearfix">
            <div style="width: 100%">
                <table align="center" class="table table-striped table-bordered table-hover" style="text-align: center;font-size: 15px;margin: 20px auto;">
                    <thead>
                    <tr>
                        <th style="text-align: center;" width="200">时间</th>
                        <th style="text-align: center;" width="500">生产进度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2016-11-20 15:12:45</td>
                        <td>江苏省南京市XXXX 【张二】 【下单成功】</td>
                    </tr>
                    <tr>
                        <td>2016-11-21 15:12:45</td>
                        <td>江苏省南京市XXXX 【张二】 【订单确认中】</td>
                    </tr>
                    </tbody>
                </table>
            </div>
    </div>
</div>
<div class="add_menber" id="add_menber_style1" style="display:none;">
    <div class="clearfix">
        <div style="width: 100%">
            <table  class="table table-striped table-bordered table-hover" align="center" style="text-align: center;font-size: 15px;margin: 20px auto;">
                <thead>
                <tr>
                    <th style="text-align: center;" width="200">时间</th>
                    <th style="text-align: center;" width="500">生产进度</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2016-11-20 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【下单成功】</td>
                </tr>
                <tr>
                    <td>2016-11-21 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已确认】</td>
                </tr>
                <tr>
                    <td>2016-11-22 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单生产中】</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
<div class="add_menber" id="add_menber_style2" style="display:none;">
    <div class="clearfix">
        <div style="width: 100%">
            <table  class="table table-striped table-bordered table-hover" align="center" style="text-align: center;font-size: 15px;margin: 20px auto;">
                <thead>
                <tr>
                    <th style="text-align: center;" width="200">时间</th>
                    <th style="text-align: center;" width="500">生产进度</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2016-11-20 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【下单成功】</td>
                </tr>
                <tr>
                    <td>2016-11-21 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已确认】</td>
                </tr>
                <tr>
                    <td>2016-11-22 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已生产】</td>
                </tr>
                <tr>
                    <td>2016-11-23 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单入库中】</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
<div class="add_menber" id="add_menber_style3" style="display:none;">
    <div class="clearfix">
        <div style="width: 100%">
            <table  class="table table-striped table-bordered table-hover" align="center" style="text-align: center;font-size: 15px;margin: 20px auto;">
                <thead>
                <tr>
                    <th style="text-align: center;" width="200">时间</th>
                    <th style="text-align: center;" width="500">生产进度</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2016-11-20 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【下单成功】</td>
                </tr>
                <tr>
                    <td>2016-11-21 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已确认】</td>
                </tr>
                <tr>
                    <td>2016-11-22 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已生产】</td>
                </tr>
                <tr>
                    <td>2016-11-23 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已入库】</td>
                </tr>
                <tr>
                    <td>2016-11-23 19:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单出库中】</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
<div class="add_menber" id="add_menber_style4" style="display:none;">
    <div class="clearfix">
        <div style="width: 100%">
            <table  class="table table-striped table-bordered table-hover" align="center" style="text-align: center;font-size: 15px;margin: 20px auto;">
                <thead>
                <tr>
                    <th style="text-align: center;" width="200">时间</th>
                    <th style="text-align: center;" width="500">生产进度</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2016-11-20 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【下单成功】</td>
                </tr>
                <tr>
                    <td>2016-11-21 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已确认】</td>
                </tr>
                <tr>
                    <td>2016-11-22 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已生产】</td>
                </tr>
                <tr>
                    <td>2016-11-26 08:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已入库】</td>
                </tr>
                <tr>
                    <td>2016-11-26 12:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已出库】</td>
                </tr>
                <tr>
                    <td>2016-11-26 14:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单物流中】<a href="javascript:;" class="cha_k" style="text-decoration: none;color:blue">查看详情</a></td>
                </tr>
                <table  class="table table-striped table-bordered table-hover cha_k_hide" align="center"  style="display:none;text-align: center;font-size: 15px;margin: 20px auto;">
                    <thead>
                    <tr>
                        <th style="text-align: center;" width="200">时间</th>
                        <th width="500" style="text-align: center;">地点和跟踪进度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2016-12-12 15:12:45</td>
                        <td>江苏省南京市XXX路 【司机 李四 18715152115 鄂A5615】</td>
                    </tr>
                    <tr>
                    </tr><tr>
                        <td>2016-12-12 15:12:45</td>
                        <td>江苏省南京市XXX路 【换车1】【司机 李四 18715152115 鄂A5615】</td>
                    </tr>
                    <tr>
                        <td>2016-12-13 15:12:45</td>
                        <td>浙江省杭州市XXX路 【初始】【司机 张三 1565458785 鄂A5615】</td>
                    </tr>

                    </tbody>
                </table>
                </tbody>
            </table>
        </div>
    </div>
</div><div class="add_menber" id="add_menber_style5" style="display:none;">
    <div class="clearfix">
        <div style="width: 100%">
            <table   class="table table-striped table-bordered table-hover cha_k_hide" align="center" style="text-align: center;font-size: 15px;margin: 20px auto;">
                <thead>
                <tr>
                    <th style="text-align: center;" width="200">时间</th>
                    <th style="text-align: center;" width="500">生产进度</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2016-11-20 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【下单成功】</td>
                </tr>
                <tr>
                    <td>2016-11-21 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已确认】</td>
                </tr>
                <tr>
                    <td>2016-11-22 15:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已生产】</td>
                </tr>
                <tr>
                    <td>2016-11-26 08:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已入库】</td>
                </tr>
                <tr>
                    <td>2016-11-26 12:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已出库】</td>
                </tr>
                <tr>
                    <td>2016-11-26 14:12:45</td>
                    <td>江苏省南京市XXXX 【张二】 【订单已签收】<a href="javascript:;" class="cha_k" style="text-decoration: none;color:blue">查看物流</a></td>
                </tr>
                <table   class="table table-striped table-bordered table-hover cha_k_hide" align="center" style="display:none;text-align: center;font-size: 15px;margin: 20px auto;">
                    <thead>
                    <tr>
                        <th style="text-align: center;" width="200">时间</th>
                        <th width="500" style="text-align: center;">地点和跟踪进度</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2016-12-12 15:12:45</td>
                        <td>江苏省南京市XXX路 【司机 李四 18715152115 鄂A5615】【已签收】</td>
                    </tr>
                    <tr>
                    </tr><tr>
                        <td>2016-12-12 15:12:45</td>
                        <td>江苏省南京市XXX路 【换车1】【司机 李四 18715152115 鄂A5615】</td>
                    </tr>
                    <tr>
                        <td>2016-12-13 15:12:45</td>
                        <td>浙江省杭州市XXX路 【初始】【司机 张三 1565458785 鄂A5615】</td>
                    </tr>

                    </tbody>
                </table>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
<script>
    jQuery(function ($) {
        $(document).ready(function(){
         //   $("#hide_tab").hide();
        });

        $(".cha_k").on('click',function(){
            $(".cha_k_hide").show();
        });
        $(".cha_x").on('click', function () {
            $("#hide_tab").css({
                visibility:"visible"
            });
        });
        $(".que_r").on('click', function () {
            layer.open({
                type: 1,
                title: '详情',
                shadeClose: true, //点击遮罩关闭层
                area: ['900px', ''],
                content: $('#add_menber_style'),
                btn: ['返回'],
                yes: function (index, layero) {
                    layer.close(index);
                }
            });
        });
        $(".shen_c").on('click', function () {
            layer.open({
                type: 1,
                title: '详情',
                shadeClose: true, //点击遮罩关闭层
                area: ['900px', ''],
                content: $('#add_menber_style1'),
                btn: ['返回'],
                yes: function (index, layero) {
                    layer.close(index);
                }
            });
        });
        $(".ru_k").on('click', function () {
            layer.open({
                type: 1,
                title: '详情',
                shadeClose: true, //点击遮罩关闭层
                area: ['900px', ''],
                content: $('#add_menber_style2'),
                btn: ['返回'],
                yes: function (index, layero) {
                    layer.close(index);
                }
            });
        });
        $(".wu_liu").on('click', function () {
            layer.open({
                type: 1,
                title: '详情',
                shadeClose: true, //点击遮罩关闭层
                area: ['900px', ''],
                content: $('#add_menber_style4'),
                btn: ['返回'],
                yes: function (index, layero) {
                    $(".cha_k_hide").hide();
                    layer.close(index);
                }
            });
        });
        $(".chu_k").on('click', function () {
            layer.open({
                type: 1,
                title: '详情',
                shadeClose: true, //点击遮罩关闭层
                area: ['900px', ''],
                content: $('#add_menber_style3'),
                btn: ['返回'],
                yes: function (index, layero) {
                    layer.close(index);
                }
            });
        });
        $(".chen_g").on('click', function () {
            layer.open({
                type: 1,
                title: '详情',
                shadeClose: true, //点击遮罩关闭层
                area: ['900px', ''],
                content: $('#add_menber_style5'),
                btn: ['返回'],
                yes: function (index, layero) {
                    $(".cha_k_hide").hide();
                    layer.close(index);
                }
            });
        });
//        $(".wan_c").on('click', function () {
//            layer.open({
//                type: 1,
//                title: '详情',
//                shadeClose: true, //点击遮罩关闭层
//                area: ['900px', ''],
//                content: $('#add_menber_style5'),
//                btn: ['返回'],
//                yes: function (index, layero) {
//                        layer.close(index);
//                }
//            });
//        });
    });
</script>
<script type="text/javascript">
    //初始化宽度、高度
    $(".widget-box").height($(window).height() - 215);
    $(".table_menu_list").width($(window).width() - 260);
    $(".table_menu_list").height($(window).height() - 215);
    //当文档窗口发生改变时 触发
    $(window).resize(function () {
        $(".widget-box").height($(window).height() - 215);
        $(".table_menu_list").width($(window).width() - 260);
        $(".table_menu_list").height($(window).height() - 215);
    });
    var oTable1 = $('#sample-table').dataTable({
//            "aaSorting": [[1, "desc"]],//默认第几个排序
        "bStateSave": false,//状态保存
        "aoColumnDefs": [
            //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
            {"orderable": false, "aTargets": [1, 2, 3,4, 5, 6, 7]}// 制定列不参与排序
        ]
    });
    /*******树状图*******/
</script>
